{include file="public/header" /}
<span class="layui-breadcrumb">
  <a href="javascript:;">产品</a>
  <a href="{:url('product/index')}?nav=product-productlist">产品列表</a>
  <a><cite>修改附加属性</cite></a>
</span>

<style> 
.layui-form-label{width:200px;}
.layui-form-item .layui-input-block{margin-left:230px;}
</style>
<div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body">

        <div class="layui-form">
         <form class="layui-form" action="" id='product_ext_form' style='padding:10px;'>
         	<div id='add'>
	            {volist name="data_list" id="data"}
	            <div id="old_{$data['id']}">
		            <div class="layui-form-item">
		          	    <label class="layui-form-label"></label>
		                <div class="layui-input-inline" style='width:500px'>
		                  <input type="text" name="old_{$data['id']}" value="{$data['meta_key']}" autocomplete="off" placeholder="请输入附加名称" class="layui-input">
		                </div>
		                <div class="layui-input-inline">
		                   <input type="text" name="oldv_{$data['id']}" value="{$data['meta_value']}" autocomplete="off" placeholder="请输入附加值" class="layui-input">
		                </div>
		                <div class="layui-input-inline" style='margin-top:5px'>
		                   <button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="out('old',{$data['id']})">移 除</button>
		                </div>
		            </div>
	            </div>
	            {/volist}
            </div>
            <div class="layui-form-item">
            	<label class="layui-form-label"></label>
            	<div class="layui-input-inline">
                  <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" onclick='add()'>添 加</button>
            	</div>
            </div>
            <div class="layui-form-item">
            	<label class="layui-form-label"></label>
            	<div class="layui-input-inline">
              <button type="button" class="layui-btn layui-btn-fluid layui-btn-normal" onclick="execute({$pid})">确 定</button>
          </div>
            </div>
          
        </form>

        </div>
      </div>  
    </div>
</div>
{include file="/public/footer" /}
<!-- 怎么区分每一个meta_key和meta_value是不一样的 -->
<!-- meta_key和meta_value后面缀上对应id-->
<script>
var fj=0;
function add(){
	var str='<div id="new_'+fj+'"><div class="layui-form-item"><label class="layui-form-label"></label><div class="layui-input-inline" style="width:500px"><input type="text" name="new_'+fj+'" autocomplete="off" placeholder="请输入附加名称" class="layui-input"></div><div class="layui-input-inline"><input type="text" name="newv_'+fj+'" autocomplete="off" placeholder="请输入附加值" class="layui-input"></div><div class="layui-input-inline" style="margin-top:5px"><button type="button" class="layui-btn layui-btn-xs layui-btn-danger" onclick="out(\'new\','+fj+')">移 除</button></div></div></div>';
	$("#add").append(str);
	fj++;
}

function out(type,id){
	if(type!='old'){
		$("#new_"+id).remove();
	}else{
		layer.confirm('你确定要移除该属性吗', {
	      btn: ['确定','取消'] //按钮
	    }, function(){
	      layer.load();
	      $.post("{:url('Product/productext_del')}",{id:id},function(res){
	          if(res.status=='0'){
	              layer.closeAll('loading');
	              layer.msg(res.msg);  
	          }
	          if(res.status=='1'){
	              layer.msg(
	              res.msg,{icon: 1,time: 600},
	              function(){
	                layer.closeAll('loading');
	                location.href=location.href;
	              });
	          }
	      })
	    });
	}
}
function execute(pid){
	layer.load();
    var x=$("#product_ext_form").serialize();
    $.post("{:url('Product/productext_insert_update')}"+"?pid="+pid,x,function(res){
        if(res.status=='0'){
            layer.closeAll('loading');
            layer.msg(res.msg);
            $("input[name='"+res.suo+"']").focus();
            return false;
        }
        if(res.status=='1'){
            layer.msg(
            res.msg,{time: 1500 },
            function(){
              layer.closeAll();
              location.href=location.href;
            });
        }
    }) 
}
</script>

